<template>
  <view class="contenter">
    <view class="head flex">
      <item-image :type="'1'" :img="data.userimg" :size="146"   :fade="false"/>
      <view class="nei">
        <view class="name">{{data.nickname}}</view>
        <view>{{data.phone || ''}}</view>
<!--        <view class="time">上次服务时间：2021/08/10</view>-->
      </view>
    </view>
    <view class="content" v-for="(data,index) in list" :key="index">
      <view class="h5 u-flex">用户旗下项目</view>
      <view class="flex flex_bt item">
        <view class="flex">
          <item-image  :img="data.image" :width="160" :height="160"  :fade="false"/>
          <view class="flex flex_bt flex-column">
            <view class="name">{{data.sname}}</view>
            <view class="price" v-if="data.num === 0">产品已用完</view>
            <view class="text" v-else>剩余次数：{{data.num}}次</view>
          </view>
        </view>
        <view class="num u-flex">{{data.num}}</view>
      </view>
    </view>
    <view class="bton" >
      <view class="bt" @click="xiadan(1)">帮Ta预约</view>
      <view class="bts" @click="xiadan(0)">帮Ta下单</view>
    </view>

  </view>
</template>

<script>
export default {
name: "myUserDetail",
  data(){
    return{
      type:2, //2是门店
      data:{},
      list:[],
    }
  },
  onLoad(option){
    this.data = JSON.parse(option.data)
    this.setData()
  },
  methods:{
    setData(){
      //服务列表
      this.$api.userService({id:this.data.id}).then(res => {
        this.list = res.data
      })
    },
    // 下单
    xiadan(index){
      this.$u.route({
        url: 'pagesA/placeAnOrder/index',
        params: {
          type: index,// 0是下单，1是预约
          uid: this.data.id,// 0是下单，1是预约
        }
      });
    },

  },
}
</script>

<style scoped lang="scss">
  .contenter{
    margin:  0 32rpx;
    .head{
      height: 198rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      padding: 20rpx 26rpx;
      margin-top: 20rpx;
      .nei{
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #555555;
        .name{
          font-size: 36rpx;
          color: #4B4B4B;
          margin-bottom: 10rpx;
        }
        .time{
          margin-top: 20rpx;
          margin-bottom: 10rpx;
        }
      }
    }
    .content{
      margin-top: 20rpx;
      background: white;
      border-radius: 12rpx;
      .item{
        padding: 20rpx;
      }
      .h5{
        height: 88rpx;
        padding: 0 20rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #0F4C3A;
      }
      .flex_bt{
        margin-left: 20rpx;
      }
      .name{
        font-size: 32rpx;
        font-weight: bold;
        color: #3B3B3B;
      }
      .text{
        font-size: 28rpx;
        color: #959595;
      }
      .price{
        color: #E86823;
      }
      .num{
        font-size: 28rpx;
        color: #45806E;
        margin-right: 30rpx;
      }
    }
    .bton{
      margin:60rpx auto;
      .bts{
        margin: 40rpx auto;
        width: 590rpx;
        height: 78rpx;
        background:white;
        border-radius: 40rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;
        color: #45806E;
        border: 2rpx solid #45806E;
      }
    }
  }
</style>